<template>
	<view>
		<u-popup mode="center" :show="showBool" bgColor="transparent" @close="close">
			<view class="upgrade-box upgrade-box0">
				<view class="content-box">
					<view class="date font-36 font-b color-w">系统消息</view>
					<image class="upgrade-box-bg" src="@/static/message/mssage.png" mode=""></image>
					<view class="content">
						<view class="font-14 p-b-30 pre-text" v-if="messageData.content">{{ messageData.content }}</view>
						<view class="font-14 text-right p-b-30" v-if="messageData.createTime">{{ messageData.createTime | formatDate }}</view>
					</view>
					<view class="btn" @tap="close">我知道了</view>
				</view>
				<view class="m-t-20">
					<u-icon name="close-circle" color="#fff" size="50rpx" @tap="close"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "popupCom",
		props: {
			messageData: {
				type: Object,
			},
			show: {
				type: Boolean,
			},
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				return year + "-" + month + "-" + day;
			}
		},
		watch:{
			show:{
				handler(val){
					if(val){
						this.showBool = true
					}else{
						this.showBool = false
					}
				},
				deep:true,
				immediate:true
			}
		},
		data() {
			return {
				showBool: true
			};
		},
		methods: {
			close() {
				this.$emit('close')
			},
		}
	};
</script>

<style lang="scss">
	.pre-text { 
		white-space: pre-wrap;
	}
	.upgrade-box0 {
		.content-box {
			padding: 246rpx 40rpx 139rpx 40rpx;
			width: 100%;
			box-sizing: border-box;
			.content {
				height: 400rpx;
			}
		}
	}
	.upgrade-box {
		width: 600rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.content-box {
			width: 100%;
			height: 805rpx;
			position: relative;
			z-index: 1;

			.upgrade-box-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.date {
				position: absolute;
				top: 80rpx;
				left: 154rpx;
				font-size: 60rpx;
				color: #FFFFFF;
			}

			.title {
				color: #000;
			}

			.takeaway {
				font-size: 50rpx;
				color: #ED6400;
				font-weight: bold;
			}



			.content {
				overflow: auto;
			}

			.btn {
				background: #ee3700;
				border-radius: 30rpx;
				padding: 14rpx 58rpx;
				width: max-content;
				color: #fff;
				margin: 20rpx auto 20rpx auto;
			}

			.btn-box {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				>view {
					border-radius: 30rpx;
					padding: 12rpx 50rpx;
				}

				.btn {
					margin: 0;
				}

				.btn-border {
					border: 1px solid #ee3700;
					color: #ee3700;
				}

			}
		}
	}
</style>